<template>
  <section class="youxue-mirror component">
    <p class="ml-10 mb-10 bold">案例代码</p>
    <code-mirror :options="options" v-model="value"></code-mirror>
  </section>
</template>

<script>
// 组件
import { codemirror } from "vue-codemirror";

import "codemirror/mode/python/python"; // 语言模式
import "codemirror/lib/codemirror.css"; // 组件样式

export default {
  name: "youxueMirror",

  model: {
    name: "value",
    event: "input"
  },

  props: {
    value: {
      type: String,
      default: ""
    }
  },

  data() {
    return {
      options: {
        mode: "python",
        theme: "atom",
        readOnly: "nocursor", // 只读
        lineNumbers: true, // 显示行号
        lineWrapping: true // 换行
      }
    };
  },

  components: {
    codeMirror: codemirror
  }
};
</script>

<style lang="scss">
// --- 代码高亮颜色 ----
$background: #272c36; // 背景色
$keyword: #ab9df1; // 关键字
$builtin: $keyword;
$def: #f08d49; // 方法
$comment: #a59391; // 注释
$string: #7ec699; // 字符
$number: $def; // 数字
$variable: #79dce8; // 变量

.youxue-mirror {
  height: 100%;
  background-color: $background;
  color: $color-white;
  border-radius: $radius;
  padding: 10px 0;

  .vue-codemirror {
    height: 100%;

    .CodeMirror {
      height: 100%;

      .CodeMirror-scroll {
        max-height: 300px;
      }

      .CodeMirror-code {
        pointer-events: none;
        user-select: none;
      }

      &.cm-s-atom {
        font-family: inherit;
        background-color: $background;
        color: $color-white;

        // 主题配置
        @each $name,
          $color
            in (
              keyword: $keyword,
              builtin: $builtin,
              def: $def,
              comment: $comment,
              string: $string,
              number: $number,
              variable: $variable
            )
        {
          .cm-#{$name} {
            color: $color;
          }
        }

        // 样式重置

        // 行数
        .CodeMirror-gutters,
        .CodeMirror-gutter-elt {
          background-color: transparent;
          border-right: none;
          text-align: center;
        }
      }
    }
  }
}
</style>
